<template>
  <div class="applyDeviceList pd-20">
    <div>
      <el-input v-model="loginName"
                placeholder="请输入登录账号"
                class="w-200"
                clearable/>
      <el-input v-model="nickName"
                placeholder="请输入昵称"
                class="w-200"
                clearable/>
      <Select placeholder="请输入医院名称"
              clearable
              v-model="hospitalId"
              filterable
              remote
              :remote-method="remoteMethod"
              :loading="loading"
              class="w-200">
        <Option v-for="(hospital, index) in hospitalList"
                :value="hospital.id"
                :key="index">{{ hospital.name }}
        </Option>
      </Select>
      <el-button type="primary"
                 @click="handleQuery">查 询
      </el-button>
      <el-button @click="goPage"
                 type="primary">返 回
      </el-button>
    </div>
    <v-table style="width:100%; "
             border
             :columns="columns"
             :table-data="tableData"
             row-hover-color="#eee"
             row-click-color="#edf7ff"
             :show-vertical-border="false"
             :is-horizontal-resize="true"
             :row-height="62"
             column-width-drag
             @on-custom-comp="customCompFunc"
             class="mt-20">
    </v-table>
    <v-pagination @page-change="pageIndexChange"
                  @page-size-change="_pageSizeChange"
                  :total=pageTotal>
    </v-pagination>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: "applyDeviceList",
  data() {
    return {
      columns: [
        {
          field: 'custome',
          title: '序号',
          width: 5,
          titleAlign: 'center',
          columnAlign: 'center',
          formatter: function (rowData, rowIndex) {
            return rowIndex + 1
          },
          isFrozen: true,
          isResize: true
        },
        {
          field: 'headImageUrl',
          title: '头像',
          width: 60,
          titleAlign: 'center',
          columnAlign: 'center',
          formatter: function (rowData) {
            return '<img style="width: 60px;height: 60px;border-radius: 50%;" src=' + rowData.headImageUrl + '>'
          },
          isResize: true
        },
        {field: 'loginName', title: '登录名', width: 120, titleAlign: 'center', columnAlign: 'center', isResize: true},
        {field: 'nickName', title: '昵称', width: 60, titleAlign: 'center', columnAlign: 'center', isResize: true},
        {
          field: 'sex',
          title: '性别',
          width: 50,
          titleAlign: 'center',
          columnAlign: 'center',
          formatter: function (rowData) {
            if (rowData.sex == 0) {
              return "女"
            } else if (rowData.sex == 1) {
              return "男"
            }
          },
          isResize: true
        },
        {field: 'positionName', title: '职称', width: 60, titleAlign: 'center', columnAlign: 'center', isResize: true},
        {field: 'hospitalName', title: '所属医院', width: 160, titleAlign: 'center', columnAlign: 'center', isResize: true},
        {field: 'departmentName', title: '科室', width: 60, titleAlign: 'center', columnAlign: 'center', isResize: true},
        {
          field: 'qrCodeUrl',
          title: '二维码',
          width: 60,
          titleAlign: 'center',
          columnAlign: 'center',
          formatter: function (rowData) {
            return '<img style="width: 60px;height: 60px;" src=' + rowData.qrCodeUrl + '>'
          },
          isResize: true
        },
        {field: 'areaName', title: '区域', width: 60, titleAlign: 'center', columnAlign: 'center', isResize: true},
        {
          field: 'operation',
          title: '操作',
          width: 200,
          titleAlign: 'center',
          columnAlign: 'center',
          componentName: 'table-operation',
          isResize: true
        }
      ],
      tableData: [],
      pageTotal: 0,       //总条数
      hospitalList: [],
      loading: false,
      loginName: '',
      nickName: '',
      hospitalId: '',
      pageIndex: 0,
      pageSize: 10
    }
  },
  mounted() {
    this._getList()
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.ajax({
          type: 'post',
          url: this.api.searchHospital,
          data: {
            pageSize: 20,
            pageStart: 0,
            name: query
          },
          success: (data) => {
            this.hospitalList = data.object
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      } else {
        this.hospitalList = [];
      }
      this.loading = false;
    },
    handleQuery() {
      this._getList()
    },
    _getList() {
      this.loading = true
      let param = {
        loginName: this.loginName,
        nickName: this.nickName,
        hospitalId: this.hospitalId,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      };
      this.post(this.api.selectVolunteerList.url, param).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.object;
          this.pageTotal = res.data.totalNum;
          this.$previewRefresh();
        }
      })
      this.loading = false
    },
    customCompFunc(params) {
      if (params.type === 'configuration') {
        let param = {
          id: this.$route.query.id,
          doctorId: params.rowData.id
        };
        this.post(this.api.configurationVolunteer.url, param).then((res) => {
          if (res.data.code === '200') {
            this.$Message.success("配置成功!");
            this.$router.push({name: 'servicePageOrderMgt'});
          }
        })
      }
    },
    pageIndexChange(pageIndex) {
      this.pageIndex = pageIndex - 1
      this._getList()
    },
    _pageSizeChange(pageSize) {
      this.pageSize = pageSize
      this._getList()
    },
    goPage() {
      this.$router.push({name: 'servicePageOrderMgt'});
    }
  }
}
// 自定义列组件
Vue.component('table-operation', {
  template: `<a class="operation" @click.stop.prevent="configuration(rowData)"><span>配置</span></a>`,
  props: {
    rowData: {
      type: Object
    },
    field: {
      type: String
    },
    index: {
      type: Number
    }
  },
  methods: {
    configuration() {
      let params = {type: 'configuration', rowData: this.rowData};
      this.$emit('on-custom-comp', params);
    }
  }
})
</script>
<style>
.operation {
  color: #33c99e;
  cursor: pointer;
}

a:hover {
  color: #33c99e;
}

.v-page-ul {
  float: right;
}
</style>

